<template>
  <div class="debug-jslog">
    <t-drawer
      v-model:visible="visibleJsLog"
      header="JS Log"
      :on-overlay-click="() => (visibleJsLog = false)"
      size="50%"
      :close-btn="true"
      confirm-btn="清除"
      cancel-btn="关闭"
      @cancel="visibleJsLog = false"
      @confirm="onConfirm"
    >
      <div class="debug-jslog-body">
        <pre>{{ log }}</pre>
      </div>
    </t-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, watch } from 'vue';

import { ApiDebugClear } from '@/api/api';

const props = defineProps({
  // 是否可见
  visible: {
    type: Boolean,
    default: false,
  },
  // 类型
  type: {
    type: Number,
    default: 0,
  },
  // 数据
  data: {
    type: String,
    default: '',
  },
});

// 事件
const emit = defineEmits(['update:visible', 'update:data']);
const visibleJsLog = ref(false);
const { visible, data } = toRefs(props);
watch(visible, (v) => {
  visibleJsLog.value = v;
});

const log = ref('');
watch(data, (v) => {
  log.value = v;
});

// 通知 visible
watch(visibleJsLog, (v) => {
  emit('update:visible', v);
});

// 确认清除
const onConfirm = () => {
  ApiDebugClear(props.type + 1).then((data) => {
    if (data) {
      log.value = '';
    }
  });
};

// const list = ref();
// watch(data, (v) => {
//   const regex = />>\[([0-9]{2}:[0-9]{2}:[0-9]{2})\]:\s*([\s\S].*)/g;
//   let match;
//   const results = [];
//
//   // eslint-disable-next-line no-cond-assign
//   while ((match = regex.exec(v)) !== null) {
//     results.push({
//       time: match[1],
//       content: match[2],
//     });
//   }
//
//   console.log(results);
// });
</script>

<style lang="less" scoped>
.debug-jslog {
  &-body {
  }
}
</style>
